<template>
  <div class="radioButton-box">
    <div
      class="radioButton"
      :gqValue="gqValue"
      @click="radioClick(gqValue)"
      :dataField="dataField"
      :style="calcCreateObj"
    >
      <div
        class="radioButton-item"
        :class="{ checked: this.gqValue == this.selectNum, readonly: readonly }"
      ></div>
    </div>
    <!-- 按钮后面的文本 -->
    <div
      class="radioButton-text"
      :contenteditable="true"
      @click="setRadioText"
      :style="styleObj"
    >
      {{ caption }}
    </div>
  </div>
</template>

<script>
export default {
  name: "newRadio",
  data() {
    return {
      checked: false,
      color: "#000000",
      selectNum: 0,
      // 组件唯一标识
      typeID: "radioButton",
      typeName: "单选框",
      descStr: "单选框",
      verNum: 1,
      title: "可编辑",
    };
  },
  props: {
    caption: {
      type: String,
      default: "sss",
    },
    // 是否必填
    required: {
      type: Boolean,
      default: true,
    },
    readonly: {
      type: Boolean,
      default: true,
    },
    gqValue: {
      type: [String, Number],
      default: "1",
    },
    createObj: {
      // type: Object,
      default: function () {
        return {
          type: 1,
          id: "radioBtn_123",
          x: 0,
          y: 0,
          width: 5,
          height: 5,
        };
      },
    },
    styleObj: {
      // type: Object,
      default: function () {
        return {
          "font-family": "宋体,simsun",
          "font-size": "18pt",
          "font-weight": "normal",
          "font-style": "normal",
          color: "#e06357",
          "text-align": "left",
        };
      },
      // 字体颜色
      // 创建属性
    },
    dataField: {
      type: [String, Number],
      default: "",
    },
    // 文字属性
    appearanceProp: {
      // type: Object,
      default: function () {
        return {
          text: {
            fontfamily: "宋体,simsun",
            fontSize: "20pt",
            // 粗体
            isBold: true,
            // 斜体
            isItalic: true,
            textColor: "#000000",
            textAlign: "left",
          },
        };
      },
    },
  },
  watch: {
    caption: {
      deep: true,
      handler: function (newVal, oldVal) {
        console.log(newVal);
      },
    },
  },
  methods: {
    radioClick(value) {
      this.selectNum = value;
      this.$emit("setSelect", {
        gqValue: this.gqValue,
        selectNum: this.selectNum,
        dataField: this.dataField,
      });
      console.log(value, "val");

      // console.log(document.querySelector(".radioButton-text").innerHTML);
    },
    setRadioText() {
      console.log(111);
    },
    //  控件方法 返回的外接矩形边框
    getBBox() {
      return {
        left: this.createObj.x,
        top: this.createObj.y,
        width: this.createObj.width,
        height: this.createObj.height,
      };
    },
  },
  computed: {
    // 文字属性
    textStyle() {
      let textStyle = this.appearanceProp.text;

      return [
        {
          fontFamily: textStyle.fontfamily,
          // borderColor: borderObj.borderColor,

          "font-size": textStyle.fontSize,
          "font-weight": textStyle.isBold ? "bold" : "normal",
          fontStyle: textStyle.isItalic ? "italic" : "normal",
          color: textStyle.textColor,
          textAligin: textStyle.textAlign,
        },
      ];
      // const { prefixCls } = this;
      // return {
      //   [`${prefixCls}-wrapper`]: true,
      // };
    },
    // 组件方法属性
    calcCreateObj() {
      let obj = this.createObj;
      return [
        {
          top: obj.y,
          left: obj.x,
          width: obj.width + "mm",
          height: obj.height + "mm",
          // borderColor: borderObj.borderColor,
        },
      ];
    },

    // checkboxClass() {
    //   const { prefixCls, indeterminate, checked, disabled } = this;
    //   return {
    //     [`${prefixCls}`]: true,
    //     [`${prefixCls}-checked`]: checked,
    //     [`${prefixCls}-disabled`]: disabled,
    //     [`${prefixCls}-indeterminate`]: indeterminate,
    //   };
    // },
  },
};
</script>

<style lang="scss" scoped>
.radioButton-box {
  margin: 3mm 0;
  display: flex;
  // padding-left: 3mm;
  align-items: center;
  .radioButton-text {
    margin-left: 3mm;
    min-height: 10mm;
    height: 3mm;
    border: 1mm solid #409eff;
    outline: none;
  }
}
.radioButton {
  border-radius: 50%;
  width: 10mm;
  height: 10mm;
  border: 1mm solid #409eff;
  cursor: pointer;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.radioButton-item {
  width: 3mm;
  height: 3mm;
  // background-color: blue;
  border-radius: 50%;
  transition: all 1s ease;
}
.checked {
  background-color: #409eff;
  transition: all 1s ease;
}
.disabled {
  pointer-events: none;
}
</style>
